<!-- 课程大纲 -->
<template>
    <div class="app-container">
      <h2 style="text-align: center;">发布新课程</h2>
      <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
        <el-step title="填写课程基本信息"/>
        <el-step title="创建课程大纲"/>
        <el-step title="最终发布"/>
      </el-steps>
      <el-button type="text" @click="openChapterDialog()">添加章节</el-button>
      <!-- 章节 -->
      <ul class="chanpterList">
          <li
              v-for="chapter in chapterVideoList"
              :key="chapter.id">
              <p>
                  {{ chapter.title }}
                  <span class="acts">
                    <el-button type="text" @click="openVideo(chapter.id)">添加课时</el-button>
                    <el-button style="" type="text" @click="openEditChapter(chapter.id)">编辑</el-button>
                    <el-button type="text" @click="removeChapter(chapter.id)">删除</el-button>
                  </span>
              </p>
              
              <!-- 视频 -->
              <ul class="chanpterList videoList">
                  <li
                      v-for="video in chapter.children"
                      :key="video.id">
                      <p>{{ video.title }}
                        <span class="acts">
                            <el-button type="text" @click="editVideo(video.id)">编辑</el-button>
                            <el-button type="text" @click="removeVideo(video.id)">删除</el-button>
                        </span>
                      </p>
                  </li>
              </ul>
          </li>
      </ul>
      <div>
          <el-button @click="previous">上一步</el-button>
          <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步</el-button>
      </div>
      <!-- 添加和修改章节表单 -->
        <el-dialog :visible.sync="dialogChapterFormVisible" title="添加章节">
            <el-form :model="chapter" label-width="120px">
                <el-form-item label="章节标题">
                    <el-input v-model="chapter.title"/>
                </el-form-item>
                <el-form-item label="章节排序">
                    <el-input-number v-model="chapter.sort" :min="0" controls-position="right"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogChapterFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 添加和修改课时表单 -->
        <el-dialog :visible.sync="dialogVideoFormVisible" title="添加课时">
        <el-form :model="video" label-width="120px">
            <el-form-item label="课时标题">
            <el-input v-model="video.title"/>
            </el-form-item>
            <el-form-item label="课时排序">
            <el-input-number v-model="video.sort" :min="0" controls-position="right"/>
            </el-form-item>
            <el-form-item label="是否免费">
            <el-radio-group v-model="video.isFree">
                <el-radio :label="true">免费</el-radio>
                <el-radio :label="false">默认</el-radio>
            </el-radio-group>
            </el-form-item>

                    <el-form-item label="上传视频">
            <el-upload
                :on-success="handleVodUploadSuccess"
                :on-remove="handleVodRemove"
                :before-remove="beforeVodRemove"
                :on-exceed="handleUploadExceed"
                :file-list="fileList"
                :action="BASE_API+'/eduvod/video/uploadAlyVideo'"
                :limit="1"
                class="upload-demo">
            <el-button size="small" type="primary">上传视频</el-button>
            <el-tooltip placement="right-end">
                <div slot="content">最大支持1G，<br>
                    支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br>
                    GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br>
                    MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br>
                    SWF、TS、VOB、WMV、WEBM 等视频格式上传</div>
                <i class="el-icon-question"/>
            </el-tooltip>
            </el-upload>
        </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVideoFormVisible = false;helpSaveVideo()" >取 消</el-button>
            <el-button :disabled="saveVideoBtnDisabled" type="primary" @click="saveOrUpdateVideo">确 定</el-button>
        </div>
        </el-dialog>

    </div>
</template>
<script>
import chapter from '@/api/edu/chapter'
import video from '@/api/edu/video'

    export default {
        
        data(){
            return{
                saveBtnDisabled:false,
                // 查询我们章节和小节的列表的值
                chapterVideoList:[],
                // 课程id
                courseId:'',
                // 封装章节的数据
                chapter:{
                    title: '',
                    sort: 0
                },
                // 章节弹框的值
                dialogChapterFormVisible:false,
                // 小节弹框的值
                dialogVideoFormVisible:false,
                // 小节的对象
                video:{
                    title: '',
                    sort: 0,
                    isFree: 0,
                    videoSourceId: '',
                    videoOriginalName:'',
                },
                // 保存按钮是否禁用
                saveVideoBtnDisabled:false,
                // 请求地址
                // 上传视频的后台的接口
                BASE_API:process.env.VUE_APP_BASE_API,
                fileList: [],//上传文件列表
            }
        },
        created() {
          // 获取到路由里面的id值
          // 判断是回显还是添加
          if(this.$route.params && this.$route.params.id){
              this.courseId = this.$route.params.id

              // 进行调用
              this.getChapterVideo();
            }
       
            
        },
        methods:{
            // 点击确定调用的方法(删除视频)
            handleVodRemove(){
                // 调用接口里面的删除视频的方法
                video.deleteAliyunVod(this.video.videoSourceId).then(resp => {
                      // 提示信息
                      this.$message({
                        type: 'success',
                        message: '删除视频成功!'
                    })
                    // 把文件列表清空
                    this.fileList=[]
                    // 还需要删除video里面的值清空
                    // 我们视频的id
                    this.video.videoSourceId = ''
                    // 上传视频名称
                    this.vide.videoOriginalName = ''
                    // 重新查询了一遍
                    video.updateVideo(this.video)
                })
            },
            // 点击x 调用(删除视频)
            beforeVodRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`)
            },


            // 上传视频成功调用的方法
            // 这个file是自动帮我们封装的 只要你上传成功就可以
            handleVodUploadSuccess(response,file,fileList){
                // 得到我们视频的id
                // 后面解根据这个id对阿里云的视频进行删除
                this.video.videoSourceId = response.data.videoId
                // 后面根据我们视频
                // 上传视频名称复制
                this.video.videoOriginalName = file.name

                // this.fileList=[{name:this.video.videOriginalName}]

            },

            // 上传之前的方法
            handleUploadExceed(){
                this.$message.warning('想要重新上传视频，请先删除已上传的视频')
            }, 
            // =======================小节操作============================
            
            // 删除课时
            removeVideo(id){
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 进行删除
                video.deleteVideo(id).then(resp => {
                    // 刷新页面
                    this.getChapterVideo()
                    // 提示信息
                    this.$message({
                    type: 'success',
                    message: '删除小节成功!'
                    })
                })
                this.fileList = []
                 
            })


            },

            // 回显小节的数据
            // 这个id是前台传回来的
            editVideo(id){
                // 打开弹框
                this.dialogVideoFormVisible = true
                this.video = {}
                this.fileList = []
                
                // 调用回显小节方法
                this.getVideo(id)
            },
            // 添加课时显示的弹窗
            // 添加课时的时候为我们的小节设置章节id这样才知道是哪一章
            openVideo(chapterId){
                //
                this.dialogVideoFormVisible = true
                
                this.video = {}
                this.fileList = []
                // 设置章节id
                this.video.chapterId = chapterId
            },

            helpSaveVideo(){
                this.dialogVideoFormVisible = false // 如果保存成功则关闭对话框
                this.getChapterVideo()
                this.video.title = ''
                this.video.sort = 0
                this.video.isFree = 0
                this.video.videoSourceId = ''
                this.video.videoOriginalName = ''
                this.fileList = []

                this.saveVideoBtnDisabled = false
            },

            // 回显小节数据
            getVideo(id){
                video.getVideo(id).then(resp => {
                    this.video = resp.data.eduVideo
                    // 判断一下
                    if(this.video.videoOriginalName){
                        this.fileList = [{'name':this.video.videoOriginalName}]
                    }
                    // console.log(this.video)
                })
            },

            
            // 修改小节
            updateVideo(){
                // 还需要我们的课程id
                // this.video.courseId = this.courseId
                video.updateVideo(this.video).then(resp => {
                    

                    // 关闭弹框
                    this.dialogVideoFormVisible = false
                    // 提示信息
                    this.$message({
                    type: 'success',
                    message: '修改小节成功'
                    })
                    this.helpSaveVideo()

                    // 刷新页面
                    // this.getChapterVideo()
                    

               }).catch(() => {
                this.helpSaveVideo()
               })
            },

            // 添加小节
            addVideo(){
                // 还需要我们的课程id
                this.video.courseId = this.courseId
                video.addVideo(this.video).then(resp => {
                    // 关闭弹框
                    this.dialogVideoFormVisible = false
                    // 提示信息
                    this.$message({
                    type: 'success',
                    message: '添加小节成功'
                    })

                    this.helpSaveVideo()

                    // 刷新页面
                    // this.getChapterVideo()
                    // 清空
                    // this.video = {}
                    // this.fileList=[]
                })
            },

            saveOrUpdateVideo(){
                if(!this.video.id){
                    // 调用添加
                    this.addVideo()
                } else {
                    // 调用修改
                    this.updateVideo()
                }
             
            },


            // ======================章节操作=========================
            // 删除章节
            removeChapter(chapterId){
                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 进行删除
                chapter.deletChapter(chapterId).then(resp => {
                    // 刷新页面
                    this.getChapterVideo()
                    // 提示信息
                    this.$message({
                    type: 'success',
                    message: '删除成功!'
                    })
                })
                 
            })

            },
            

            // 修改章节弹框数据回显
            openEditChapter(chapterId){
                // 弹框
                this.dialogChapterFormVisible = true
                // 调用接口
                chapter.getChapter(chapterId).then(resp => {
                    this.chapter = resp.data.chapter
                })
            },
            // 添加章节
            addChapter(){
                // 设置课程id
                this.chapter.courseId = this.courseId
                chapter.addChapter(this.chapter).then(resp => {
                    // 关闭弹框
                    this.dialogChapterFormVisible = false
                    // 提示信息
                    // 提示信息
                    this.$message({
                    type: 'success',
                    message: '添加章节成功'
                    })
                    // 重新查新一下
                    this.getChapterVideo()
                    // 清空原来的数据
                    this.chapter={}
                })
            },
            // 弹出添加章节的页面
            openChapterDialog(){
                // 打开弹窗
                this.dialogChapterFormVisible = true
                 // 清空原来的数据
                this.chapter={title:"",sort:"0"}
                
            },
            // 修改章节的方法
            updateChapter(){
                chapter.updateChapter(this.chapter).then(resp => {
                    // 关闭弹框
                    this.dialogChapterFormVisible = false
                    // 提示信息
                    // 提示信息
                    this.$message({
                    type: 'success',
                    message: '修改章节成功'
                    })
                    // 重新查新一下
                    this.getChapterVideo()
                    this.chapter={
                        title:'',
                        sort:''
                    }
                })
            },

            // 添加章节或修改章节
            saveOrUpdate(){
                if(!this.chapter.id){
                    // 调用添加章节的方法
                    this.addChapter()
                } else {
                    this.updateChapter()
                }
                
            },
            
            // 根据课程id 查询章节和小节的列表
            getChapterVideo(){
              chapter.getAllChapterVideo(this.courseId).then(resp => {
                  this.chapterVideoList = resp.data.allChapterVideo
              })
            },


            // 上一步
            previous(){
                // 跳转到第一步
                this.$router.push({path:'/course/info/'+ this.courseId})
            },

            // 下一步
            next(){
                // 跳转到第三步
                this.$router.push({path:'/course/publish/' + this.courseId})
            }
        }
    
    }
</script>
<style scoped>
  .chanpterList{
      position: relative;
      list-style: none;
      margin: 0;
      padding: 0;
  }
  .chanpterList li{
    position: relative;
  }
  .chanpterList p{
    float: left;
    font-size: 20px;
    margin: 10px 0;
    padding: 10px;
    height: 70px;
    line-height: 50px;
    width: 100%;
    border: 1px solid #DDD;
  }
  .chanpterList .acts {
      float: right;
      font-size: 14px;
  }
  .videoList{
    padding-left: 50px;
  }
  .videoList p{
    float: left;
    font-size: 14px;
    margin: 10px 0;
    padding: 10px;
    height: 50px;
    line-height: 30px;
    width: 100%;
    border: 1px dotted #DDD;
  }
  </style>